<script setup>

import {inject, onMounted, ref} from "vue";
import {doDelete, doGet, doPost, doPut} from "@/util/request.js";
import {useRoute, useRouter} from "vue-router";
import {showMessage} from "@/util/message.js";
import {InfoFilled} from "@element-plus/icons-vue";
import {ElMessageBox} from "element-plus";

//局部刷新
const refresh = inject('refresh')
//对话框打开
const dialogVisible = ref(true)
//用户详情对象
const activityDetail = ref({})
// 获取路由参数
const route = useRoute()
//获取路由对象
const router = useRouter()
//查询活动详情
const loadUserDetail = () => {
  let activityId = route.params.id;
  //发送请求，获取用户详情
  doGet('/api/activity/detail/' + activityId, {}).then(resp => {
    if (resp.data.code === 200) {
      activityDetail.value = resp.data.data
    } else {
      showMessage('查询用户详情失败', resp.data.msg, 'error')
    }
  })

}

/*-------------------备注弹窗--------------------*/
//备注弹窗
const dialogTableVisible = ref(false)
//表格数据
const gridData = ref({})
// 获取表格数据
const remark = (id) => {
  loadGridData(id)
}
const loadGridData = (activityId) => {
  //发送请求，获取表格数据
  doGet('/api/activity/remarkList/' + activityId, {}).then(resp => {
    dialogTableVisible.value = true
    if (resp.data.code === 200) {
      gridData.value = resp.data.data
    } else {
      showMessage('查询活动备注失败', resp.data.msg, 'error')
    }
  })
}
const deleteNote = (id) => {
  // 弹窗确认删除
  ElMessageBox.confirm('确认删除该备注吗？').then(() => {
    // 发送请求，删除备注
    doDelete('/api/activity/deleteRemark/' + id, {}).then(resp => {
      // 判断是否删除成功
      if (resp.data.code === 200) {
        // 提示
        showMessage('删除备注成功', 'success')
        // 刷新表格数据
        refresh()
      } else {
        showMessage('删除活动备注失败', 'error', resp.data.msg)
      }
    })
  }).catch()
}


//添加备注弹窗
const tianJiaBeiZhu = ref(false)
//新增备注对象
const addNoted = ref({})
//添加备注
const addNote = () => {
  // 打开添加备注弹窗
  tianJiaBeiZhu.value = true
}
//点击添加发送请求
const addButton = () => {
  let beiZhuData = {
    activityId: route.params.id,
    noteContent: addNoted.value.noteContent
  }
  // 发送请求，添加活动备注
  doPost('/api/activity/addRemark', beiZhuData).then(resp => {
    if (resp.data.code === 200) {
      // 提示
      showMessage('添加备注成功', 'success')
      // 刷新表格数据
      refresh()
      // 清空备注内容
      addNoted.value.noteContent = ''
      // 关闭弹窗
      tianJiaBeiZhu.value = false
    } else {
      showMessage('添加活动备注失败', 'error', resp.data.msg)
    }
  })
}


/*-------------------备注弹窗--------------------*/
onMounted(() => {
  loadUserDetail()

})
</script>

<template>

  <el-dialog
      v-model="dialogVisible"
      width="700"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      :align-center="true"
      :center="true"
      :show-close="false"
      title="活动详情">

    <el-form :model="activityDetail">
      <el-form-item label="活动编号: ">
        {{ activityDetail.id }}
        &nbsp;
        <el-tooltip
            class="box-item"
            effect="light"
            content="请点击查看备注"
            placement="right">
          <el-icon>
            <InfoFilled @click="remark(activityDetail.id)"/>
          </el-icon>
        </el-tooltip>
      </el-form-item>
      <el-form-item label="负责人: ">
        {{ activityDetail.ownerName }}
      </el-form-item>

      <el-form-item label="活动名称: ">
        {{ activityDetail.name }}
      </el-form-item>

      <el-form-item label="开始时间: ">
        {{ activityDetail.startTime }}
      </el-form-item>

      <el-form-item label="结束时间: ">
        {{ activityDetail.endTime }}
      </el-form-item>

      <el-form-item label="活动预算: ">
        {{ activityDetail.cost }}
      </el-form-item>

      <el-form-item label="创建人: ">
        {{ activityDetail.createByName }}
      </el-form-item>

      <el-form-item label="创建时间: ">
        {{ activityDetail.createTime }}
      </el-form-item>

      <el-form-item label="编辑人: ">
        {{ activityDetail.editByName }}
      </el-form-item>

      <el-form-item label="编辑时间: ">
        {{ activityDetail.editTime }}
      </el-form-item>

      <el-form-item label="活动描述: ">
        <el-input type="textarea" style="width: 400px; min-height: 50px; max-height: 200px; resize: vertical;"
                  :rows="3"
                  v-model="activityDetail.description" readonly/>
      </el-form-item>

    </el-form>
    <div style="margin-left: 450px">
      <el-button type="success" @click="addNote">添加备注</el-button>
      <el-button type="primary" @click="router.back()">返回</el-button>
    </div>
  </el-dialog>

  <!-- 活动备注弹窗 -->

  <el-dialog v-model="dialogTableVisible" center title="活动备注" width="800">
    <el-table :border="true" :data="gridData">
      <el-table-column property="activityName" label="活动名称" align="center"/>
      <el-table-column property="noteContent" label="备注内容" align="center"/>
      <el-table-column property="createByName" width="100" label="创建人" align="center"/>
      <el-table-column property="createTime" label="创建时间" align="center"/>

      <el-table-column label="备注操作" align="center">
        <template #default="scope">
<!--          <el-button size="small" type="primary" @click="editNote(scope.row.id)">编辑</el-button>-->
          <el-button size="small" type="danger" @click="deleteNote(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>

  <el-dialog v-model="tianJiaBeiZhu" center title="添加备注" width="30%">
    <el-form :model="addNoted" style="margin-left: 3px;margin-top: 1px">
      <el-input type="textarea" style="width: 100%; min-height: 50px; max-height: 200px; resize: vertical;"
                :rows="3"
                v-model="addNoted.noteContent">
      </el-input>
        <el-button type="primary" style="margin-left: 480px;margin-top: 5px" @click="addButton(activityDetail.id)">添加
        </el-button>
    </el-form>
  </el-dialog>

</template>

<style scoped>
.el-form {
  margin-top: 20px;
  margin-left: 80px;
}

.el-form-item {
  margin-left: 60px;
}

.el-col {
  margin-top: 20px;
  margin-left: 50px;
}
</style>